<!-- 工况检测 -->
<template>
  <div class="main">
    <div class="farm-main">
      <!-- 左侧 -->
      <div class="tr-left">
        <div class="tr-top">
          <div class="sid-head">产线列表</div>
          <div class="sid-tree">
            <Processlist @selectionChange="selectionProcessChange" />
          </div>
        </div>
        <div class="tr-bottom">
          <div class="sid-head">设备列表</div>
          <div class="sid-tree">
            <Equiplist ref="Equiplist" @selectionChange="selectionChange" />
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="tab-box">
        <div class="tab-box-view">
          <div class="tab-box-view-item">设备启动状态:</div>
          <p class="tab-box-view-item-status" :style="{ color: getColor(standingBookObject.status), background: getBackground(standingBookObject.status) }">{{ standingBookObject.status ? getstatus(standingBookObject.status) : '' }}</p>
        </div>
        <div class="tab-box-con-one">
          <div class="base-info-box">
            <div class="base-info-box-img">
              <img v-if="equipmentImgUrl" :src="equipmentImgUrl" alt style="width: 100%;" />
              <img v-else :src="setBackground()" alt="" />
            </div>
            <div class="base-info-box-font">
              <Box title="基础信息">
                <template v-slot:notitlebox>
                  <p class="base-info-box-font-item">设备编号：{{ standingBookObject.equipmentCode ? standingBookObject.equipmentCode : '--' }}</p>
                  <p class="base-info-box-font-item">设备类型：{{ standingBookObject.equipmentTypeName ? standingBookObject.equipmentTypeName : '--' }}</p>
                  <p class="base-info-box-font-item">设备型号：{{ standingBookObject.equModelName ? standingBookObject.equModelName : '--' }}</p>
                  <p class="base-info-box-font-item">设备名称：{{ standingBookObject.equipmentName ? standingBookObject.equipmentName : '--' }}</p>
                  <p class="base-info-box-font-item">设备购买日期：{{ standingBookObject ? standingBookObject.purchaseDate : '--' }}</p>
                  <p class="base-info-box-font-item">设备使用天数：{{ standingBookObject ? getDaysBetween(standingBookObject.purchaseDate, new Date()) : '--' }}</p>
                  <p class="base-info-box-font-item">设备保质日期：{{ standingBookObject ? standingBookObject.warrantyDate : '--' }}</p>
                  <!-- <p class="base-info-box-font-item">是否可自动驾驶：{{ standingBookObject? standingBookObject.selfDriving === true ? "是": "否": "--" }}</p> -->
                  <!-- <p class="base-info-box-font-item">设备型号编号：{{ standingBookObject.equModelCode ? standingBookObject.equModelCode : "--" }}</p> -->
                </template>
              </Box>
            </div>
          </div>
          <div class="data-info-box">
            <Box title="物联数据">
              <template v-slot:notitlebox>
                <div class="data-info-title">
                  控制类型
                  <el-select
                    v-model="controlType"
                    placeholder=""
                    @change="
                      $event => {
                        if ($event === 'WROKING') {
                          queryAllLatestData();
                        } else if ($event === 'PRODUCTION') {
                          dataItemList = [];
                        }
                      }
                    "
                  >
                    <el-option v-for="(item, index) in controlTypeArr" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
                <div v-if="dataItemList && dataItemList.length > 0" class="dataItem-box">
                  <div v-for="(item, index) in dataItemList" :key="index" class="one-dataItem-box">
                    <!-- @click="clickbottom(item)" -->
                    <Bluecard :now-card-message="item" />
                  </div>
                </div>
                <div v-else class="dataItem-box info">暂无{{ controlType === 'WROKING' ? '工况' : '生产' }}数据</div>
              </template>
            </Box>
          </div>
        </div>
      </div>
    </div>
    <Linedialog ref="Linedialog" :show.sync="dialogVisible" :equipment-name="equipmentName" :data-item-id="dataItemId" :equipment-code="equipmentCode" @closeDialog="closeDialog" />
  </div>
</template>
<script>
import Equiplist from './component/equiplist-operation.vue';
import Processlist from './component/processlist.vue';
import Bluecard from './component/bluecard.vue';
import physicalUnionDataApi from '@/api/processing-management/process-management/process-management-data/index';
import { mymixin } from '@/utils/mixin';
import Box from './component/box.vue';
import Linedialog from './component/linedialog.vue';
import equipStandingBookApi from '@/api/processing-management/equip-manage/equip-standing-book';
import equipmentApi from '@/api/processing-management/equip-manage/equipment/index.js';
import equipmentModelApi from '@/api/processing-management/equip-manage/equip-model/index.js';
import equipPurchaseRecordApi from '@/api/processing-management/equip-manage/equip-purchase-record';
export default {
  name: 'ProcessManagement',
  components: { Equiplist, Processlist, Bluecard, Box, Linedialog },
  mixins: [mymixin],
  data() {
    return {
      // 当前选中的数据项
      nowSelectDataItemId: 0,
      // 当前产线
      productLineNo: '',
      // 当前设备数据
      equipmentCode: '',
      // 当前选中设备
      equipmentName: '',
      // 弹框相关
      dialogVisible: false,
      // ---环境数据相关
      dataItemList: [],
      // 最下面的当前的数据项列表
      nowClickList: [],
      // 设备台账
      standingBookObject: {},
      // 设备台账
      purchaseObject: {},
      // 当前的设备数据项
      dataItemId: 0,
      statusArr: [
        {
          name: '启用',
          id: 'ENABLE'
        },
        {
          name: '废弃',
          id: 'DISCARD'
        },
        {
          name: '维修中',
          id: 'REPAIRING'
        },
        {
          name: '禁用',
          id: 'DISABLE'
        }
      ],
      controlTypeArr: [
        {
          name: '工况数据',
          id: 'WROKING'
        },
        {
          name: '生产数据',
          id: 'PRODUCTION'
        }
      ],
      controlType: 'WROKING',
      // 设备图片
      equipmentImgUrl: '',
      // 设备Id
      equipmentId: ''
    };
  },
  watch: {},
  mounted() {},
  methods: {
    getColor(status) {
      var color = 'rgb(227, 56, 56)';
      if (status === 'ENABLE') {
        color = '#fff';
      } else if (status === 'REPAIRING') {
        color = 'rgb(238, 139, 40)';
      }
      return color;
    },
    getBackground(status) {
      var color = 'linear-gradient(0deg, #69EBCF, #19ABBD)';
      if (status === 'ENABLE') {
        color = 'linear-gradient(0deg, #69EBCF, #19ABBD)';
      } else if (status === 'REPAIRING') {
        color = '#00000060';
      }
      return color;
    },
    getstatus(data) {
      var name = '';
      var index = this.statusArr.findIndex(a => a.id === data);
      if (index !== -1) {
        name = this.statusArr[index]['name'];
      }
      return name;
    },
    // 获取天数函数
    getDaysBetween(startDate, enDate, st = true) {
      if (!startDate || !enDate) return 0;
      const sDate = Date.parse(startDate);
      const eDate = Date.parse(enDate);
      console.log(sDate, eDate);
      if (st) {
        if (sDate > eDate) {
          return 0;
        }
        if (sDate === eDate) {
          return 0;
        }
        const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000);
        return days.toFixed(0) + '天';
      } else {
        if (sDate > eDate) {
          return 1;
        }
        if (sDate === eDate) {
          return 1;
        }
        if (sDate < eDate) {
          return 0;
        }
      }
    },
    selectionProcessChange(e) {
      // 查询产线相关设备
      this.$refs.Equiplist.queryList(e);
    },
    // 选择设备传出选择的该设备信息
    async selectionChange(e) {
      this.equipmentName = e.equipmentName;
      this.equipmentCode = e.equipmentCode;
      this.equipmentId = e.equipmentId;
      this.nowClickList = [];
      this.queryAllLatestData();
      this.queryStandingBook();
      this.queryPurchase();
      let params = { equipmentCode: e.equipmentCode };
      if (e.sourceMethod === '0') {
        // this.equipmentImgUrl = 'data:image/png;base64,' + res.data[0].pictureData;
        const res = await equipmentApi.getPictureByEquipmentCode(e.equipmentCode);
        this.equipmentImgUrl = res.data[0] && `${this.$webServiceUrl + 'common/file/upDown/view'}?fileId=${res.data[0].fileId}&upDownType=FTP&moduleType=PLATFORMDEVICE`;
      } else if (e.sourceMethod === '1') {
        const res = await physicalUnionDataApi.queryImg(params);
        this.equipmentImgUrl = res.data[0].pictureData ? 'data:image/png;base64,' + res.data[0].pictureData : res.data[0].filePath;
      }
    },
    // 查询设备数据项的最新数据
    queryAllLatestData() {
      this.dataItemList = [];
      physicalUnionDataApi.queryAllLatestData(this.equipmentCode).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          if (data.length > 0) {
            this.dataItemList = data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 获取设备台账
    queryStandingBook() {
      equipmentApi.queryById(this.equipmentId).then(async res => {
        if (res.code === 1) {
          let data = res.data || {};
          this.standingBookObject = data;
          this.$set(this.standingBookObject, 'equModelName', await this.queryequipmentModel(data.equipmentTypeCode, data.equModelCode));

          this.$set(this.standingBookObject, 'equipmentTypeName', await this.queryequipmentType(data.equipmentTypeCode, data.equModelCode));
        } else {
          this.$message.error('设备台账信息获取失败！');
        }
      });
    },
    async queryequipmentModel(e, equModelCode) {
      const { data: data } = await equipmentModelApi.queryAllEquModel(e);
      return data[equModelCode] || '';
    },
    async queryequipmentType(e, equModelCode) {
      const { data: data } = await equipStandingBookApi.queryAll();
      let index = data.findIndex(item => item.equipmentTypeCode === e);
      if (index !== -1) {
        // console.log(data)
        return data[index]['equipmentTypeName'] || '';
      }
    },
    queryPurchase() {
      equipPurchaseRecordApi.query(this.equipmentCode).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          this.purchaseObject = data;
        }
      });
    },
    // -----------
    // 点击下面的数据类别，展示弹框
    clickbottom(list) {
      this.dataItemId = list.dataItemId;
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.dataItemId = 0;
    },
    // 设置背景图
    setBackground(data) {
      let backurl = require('@/assets/machine/zhanwei.png');
      // if(this.equipmentName === '包装机') {
      //   backurl = require("@/assets/machine/machine4.png");
      // } else if(this.equipmentName === '稻米烘干机') {
      //   backurl = require("@/assets/machine/machine5.png");
      // } else if (this.equipmentName === '水稻碾米机') {
      //   backurl = require("@/assets/machine/machine6.png");
      // }
      return backurl;
    }
  }
};
</script>
<style lang="scss" scoped>
$backgroundLeftBox: #024355;
.vdr.active:before {
  display: none;
}
::v-deep .el-select .el-input__inner {
  color: #fff !important;
}
.card-style {
  width: 300px;
  height: 80px;
  margin-right: 10px;
}
.main {
  width: 100%;
  height: 100%;
}
.sid-head {
  width: 100%;
  height: 36px;
  line-height: 35px;
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  text-align: center;
  // bottom: ;
  background: url('~@/assets/processing-management/process-management-data/title-box.png') center no-repeat;
  background-size: auto 100%;
  position: absolute;
  left: -50%;
  transform: translateX(50%);
  top: -18px;
}
.farm-main {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .tr-left {
    min-width: 200px;
    width: calc(18% - 10px);
    height: 100%;
    padding: 10px;
    padding-top: 40px;
    box-sizing: border-box;
    background-color: #225768;

    .sid-head {
      // &::before {
      //   content: '';
      //   position: absolute;
      //   bottom: -8px;
      //   left: 0;
      //   width: 100%;
      //   border-bottom: 1px dashed #fff;
      // }
    }
    .tr-top {
      width: 100%;
      height: 35%;
      padding: 10px;
      padding-top: 20px;
      background-color: $backgroundLeftBox;
      position: relative;
      margin-bottom: 40px;
      .sid-tree {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
    }
    .tr-bottom {
      width: 100%;
      height: calc(65% - 40px);
      padding: 10px;
      padding-top: 20px;
      background-color: $backgroundLeftBox;
      position: relative;
      .sid-tree {
        width: 100%;
        height: 100%;
        padding-top: 20px;
        padding-left: 9px;
        padding-right: 9px;
        overflow-y: hidden;
      }
    }
  }
  .tab-box {
    width: calc(82% - 10px);
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    .tab-box-view {
      width: 100%;
      height: 50px;
      font-size: 18px;
      padding: 10px;
      padding-left: 0;
      background-color: #225768;
      display: flex;
      align-items: center;
      .tab-box-view-item {
        color: #ffffff;
        padding: 0 20px;
        border-left: 2px solid #5fe3cd;
      }
      .tab-box-view-item-status {
        background-color: rgba(0, 57, 71, 0.55);
        padding: 5px 30px;
        border-radius: 18px 18px 18px 18px;
        opacity: 1;
        border: 1px solid #003947;
      }
    }
    .tab-box-con-one {
      width: 100%;
      margin-top: 15px;
      height: calc(100% - 65px);
      padding: 10px 0 0;
      // background-color: rgba(255, 255, 255, 0.04);
      border-radius: 0px 0px 0px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.base-info-box {
  width: 64%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .base-info-box-img {
    height: 65%;
    width: 100%;
    background-color: #225768;
    display: flex;
    align-items: center;
    justify-content: center;
    > img {
      height: 100%;
      width: auto;
      max-width: 100%;
    }
  }
  .base-info-box-font {
    height: 35%;
    width: 100%;
    background-color: #225768;
    padding: 10px;
    .base-info-box-font-item {
      float: left;
      min-width: 50%;
      max-width: 100%;
      font-size: 15px;
      padding: 5px 8px;
      line-height: 30px;
      margin: 0;
    }
  }
}
.data-info-box {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #225768;
  box-sizing: border-box;
  padding: 10px;
  .data-info-title {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: #08f7e8;
    ::v-deep {
      .el-input__inner {
        border: 2px solid #2f8aa2;
        background: #00485a;
        padding: 2px 15px;
      }
    }
  }
  .dataItem-box {
    height: calc(100% - 70px);
    display: flex;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
    padding-top: 15px;
    &.info {
      align-items: center;
      align-content: center;
      font-size: 20px;
      letter-spacing: 2px;
    }
  }
  .one-dataItem-box {
    margin-bottom: 20px;
    width: 80%;
  }
}
</style>
